<template>
        <li @click.prevent="selectItem(data.id)">
          <div class="img_wrap">
            <div>
              <div>
                <div>
                  <img v-lazy="data.imgpath" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="info_wrap">
            <p>{{data.names}}</p>
            <p>{{data.spaces}}</p>
            <div>
              <div @click.stop="add_car_number(data.id)">
                <b></b>
              </div>
              <s>{{data.discount?'¥'+data.price:''}}</s>
              <p>¥{{data.salesPrice}}/{{data.unit}}</p>

            </div>
          </div>
        </li>
</template>

<script type="text/ecmascript-6">
  import {add_shop_car,get_car_number} from 'api/shop_car'
  import {get_cookie} from 'assets/cookie/cookie'
  import {mapMutations} from 'vuex'

  export default {
    props: ['data'],
    data() {
      return {
      }
    },
    created() {
      console.log(this.data)
    },
    computed: {},
    methods: {
      selectItem(id) {
        this.$emit('selectItem', id)
      },
      get_car_number(){
        get_car_number({
          token:get_cookie('key')
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setCarNumber(res.data.data[0]['no-cart'])
          }
        })
      },
      add_car_number(id){
        add_shop_car({
          token:get_cookie('key'),
          goodsId:id
        }).then((res)=>{
          console.log(res)
          if(res.status===200&&res.data.resStatus===0){
            this.setHint({
              isHint:true,
              text:'加入购物车成功',
              ok:true
            })
            this.get_car_number()
          }else if(res.data.resStatus===-1){
            this.setIsLogin(false)
        }else{
            this.setHint({
              isHint:true,
              text:res.data.message,
              ok:false
            })
        }
        })
      },
      ...mapMutations({
        setIsLogin: 'SET_IS_LOGIN',
        setCarNumber: 'SET_CAR_NUMBER',
        setHint:'SET_HINT'
      })
    },
    components: {},
    watch:{
    }
  }
</script>

<style scoped lang="scss">
  @import "../assets/sass/mixin";
 li {
   margin: 0 auto;
   position: relative;
   background-color: #fff;
   padding-bottom: 7px;
   padding-top: 11px;
   overflow: hidden;
   border-bottom: 1px solid #eee;
          > .img_wrap {
            width: 70px;
            height:88px;
            margin: 0 auto;
            position: relative;
            float: left;
            border: 1px solid #eee;
            >div{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              overflow: hidden;
              >div{
                display: table;
                width: 100%;
                height: 100%;
                >div{
                  display: table-cell;
                  vertical-align: middle;
                  > img {
                    width: 100%;
                    height: auto;
                  }
                }
              }

            }
          }
          >.info_wrap{
            overflow: hidden;
            height: 88px;
            padding-left: 10px;
            padding-right: 10px;
            text-align: left;
            > p {
              text-align: left;
              margin-top: 3px;
              font-size: 13px;
              line-height: 17px;
              height: 17px;
              @include text-ellipsis(1);
            }
            >p:nth-child(2){
              font-size: 12px;
              color: #aaa;
            }
            >div {
              height: 40px;
              margin-top: 7px;
              position: relative;
              padding-top: 1px;
              >p{
                height: 18px;
                line-height: 18px;
                color: #58b7ec;
                font-size: 15px;
                font-weight: bold;
              }
              >s{
                margin-top: 7px;
                color: #aaa;
                display: block;
                height: 14px;
              }
              >div{
                float: right;
                line-height: 38px;
                height: 38px;
                width: 38px;
                text-align: center;
                &:active{
                  background-color: #eee;
                  border-radius: 5px;
                }
                >b{
                 vertical-align: middle;
                  display: inline-block;
                  height: 25px;
                  width: 25px;
                  border-radius: 50%;
                  font-size: 20px;
                  background-size: 100% 100%;
                  background-image: url('../assets/img/add.png');
                }
              }
            }
          }
        }
</style>
